<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>管理后台-修改权限</title>
    <header th:replace="header::html"/>
    <link rel="stylesheet" th:href="@{/ztree/css/zTreeStyle/zTreeStyle.css}"/>
    <link rel="stylesheet" th:href="@{/css/ztree-style.css}"/>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <input type="hidden" id="permissionId" name="id" th:value="${permission.id}" />
            <input type="hidden" id="parentId" name="parentId" th:value="${permission.parentId}" />
            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>名称
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="name" name="name" th:value="${permission.name}" lay-verify="name" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>将会成为菜单名
                </div>
            </div>
            <div class="layui-form-item">
                <label for="iconfont" class="layui-form-label">图标</label>
                <div class="layui-input-inline">
                    <input type="text" id="iconfont" name="iconfont" th:value="${permission.iconfont}" class="layui-input">
                </div>
                <input type="button" class="layui-btn" onclick="xadmin.open('图标','/icon.html','600px','400px')" value="选择图标"/>
            </div>
            <div class="layui-form-item">
                <label for="url" class="layui-form-label">链接</label>
                <div class="layui-input-inline">
                    <input type="text" id="url" name="url" th:value="${permission.url}" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>类型
                </label>
                <div class="layui-input-inline">
                    <select name="type" th:field="${permission.type}">
                        <option value="1">菜单</option>
                        <option value="2">按钮</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="permission" class="layui-form-label">资源标识</label>
                <div class="layui-input-inline">
                    <input type="text" id="permission" name="permission" th:value="${permission.permission}" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="sort" class="layui-form-label">
                    <span class="x-red">*</span>排序
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="sort" name="sort" th:value="${permission.sort}" lay-verify="number" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>上级菜单
                </label>
                <div class="col-md-10">
                    <ul id="menuTree" class="ztree"></ul>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-filter="edit" lay-submit="" permission="sys:permission:edit">修改</button>
                    <button class="layui-btn layui-btn-primary" onclick="xadmin.close();">取消</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript" th:src="@{/ztree/js/jquery.ztree.all.min.js}"></script>
<script type="text/javascript" th:src="@{/js/menu.js}"></script>
<script type="text/javascript">
    layui.use(['form', 'layer'], function () {
        var form = layui.form,
            layer = layui.layer;

        // 初始化菜单树
        $.fn.zTree.init($("#menuTree"), getSetting(true), getMenuTree(true));

        // 初始化单选菜单tree选中状态
        initRadioCheck($("#parentId").val());

        // 权限校验
        checkPermissoin();

        // 自定义验证规则
        form.verify({
            name: function (value) {
                if (value.length < 2) {
                    return '菜单名至少2个字符';
                }
            }
        });

        // 监听提交
        form.on('submit(edit)', function (data) {
            var permissionIds = getCheckedMenuIds();
            if (permissionIds.length <= 0) {
                layer.alert("请选择对应的上级菜单");
                return false;
            }
            data.field.parentId = permissionIds[0];
            // 发异步请求，修改权限
            $.ajax({
                url: '/permission/edit',
                type: 'PUT',
                data: data.field,
                dataType: 'json',
                beforeSend: function() {
                    layer.load();
                },
                success: function (res) {
                    if (res.httpCode != 200 || res.retCode != 0) {
                        layer.alert(res.retMsg);
                    } else {
                        layer.alert("修改成功", {icon: 6}, function () {
                            // 关闭当前frame
                            xadmin.close();
                            // 对父窗口进行刷新
                            xadmin.father_reload();
                        });
                    }
                }
            });
            layer.closeAll();
            return false;
        });
    });
</script>
</body>
</html>
